
.mask {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}

.time-content {
    background: #fff;
    color: #000;
    padding: 5vw 0 0 0;
    font-size: 3.5vw;
}

.start-select, .end-select, .quick-select {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4vw;
}

.start-select > div:first-child {
    width: 25vw;
}

.end-select > div:first-child {
    width: 25vw;
}

.quick-select > div:first-child {
    width: 25vw;
}

.start-select > div:last-child {
    width: 60vw;
}

.end-select > div:last-child {
    width: 60vw;
}

.quick-select > div:last-child {
    width: 60vw;
}

.quick-date {
    display: flex;
    justify-content: space-between;
}

.quick-date span {
    padding: 2vw 4vw;
    background: #eeeeee;
    color: #636363;
    border-radius: 5px;
}

.btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    padding: 3vw 0;
    border-top: 1px solid #e5e5e5;
}


.my-btn {
    padding: 2vw 16vw;
    border-radius: 5px;
    margin: 0 3vw;
}

.close-time-select {
    border: 1px solid #d1c5d9;
    background: #fff;
    color: #646464;
}

.sure-time-select {
    border: 1px solid #fc6351;
    background: #fc6351;
    color: #fff;

}

.active {
    background: #ffdad2 !important;
    color: #fc6351 !important;
}
